import React, { useState } from 'react';
import { LeftOutlined } from '@ant-design/icons';
import { Tabs, Card } from 'antd';
import { Swiper, ImageViewer } from 'antd-mobile';
import { useNavigate } from 'react-router-dom';

const tabItems = [
    {
        label: '学校简介',
        key: '1',
    },
    {
        label: '师资简介',
        key: '2',
        children: (
            <div>
                <Card>
                    <h3>师资简介</h3>
                    <p>
                        学院现有教职工95人，其中教及13人，副教授22人，博士36人(含在读陈上)，
                        兼职师B人，安徽省学术技术带头人和学术技术带头人后备人选备1人，
                        省级教学名师3人，安徽舌第二批企业科技特派员计到4人，外聘专家17人，柔
                        性引进人员5人(其中教授3人)，现有“双能型”教师42名，其中只有专业(行业)
                        青景的26人，只有工程青量的24人，近年来，我院教师主持承担了多项重要课题。
                        包括国家重大科技专项子课题2项，国家自然科学基金10项，国家重点文验室开放
                        基金项目6项，教育部科学技术研究重点项目2项，教育部重点文验室开放是金重点
                        项目2项，安徽省自然科学基金8项，安徽省社会科学基金5项，安徽省高校自然科研
                        究及人文社会科学重点项目30余项，安徽省教育厅科学研究一般项目40余项。此外，
                        我院教师还先后参加了“973"项目1顷、“863”项目1项，国家科技计动支撑项目1项，
                        国家自然科学是金重点项目1项、国家自然科学基金面上项目10余项。主持承担各级
                        产学研项目240余项。
                    </p>
                </Card>
            </div>
        )
    }
];

const colors = [
    'https://img0.baidu.com/it/u=1783524078,1293739863&fm=253&fmt=auto&app=120&f=JPEG?w=1200&h=800',
    'https://su.bcebos.com/b2b-jiameng/online/clear_pic/5927693',
    'https://q4.itc.cn/images01/20240806/079fd1d1622c41128ea7731d0cbdc9f9.jpeg',
    'https://rs.slu.edu.cn/_upload/article/images/05/c8/1596aefd4c7aa4a16a7cac0ca6a6/9575e0e2-6fd0-4dd9-a01e-4639483a63bf.jpg'
];

export const demoImages = [
    'https://img0.baidu.com/it/u=1783524078,1293739863&fm=253&fmt=auto&app=120&f=JPEG?w=1200&h=800',
    'https://su.bcebos.com/b2b-jiameng/online/clear_pic/5927693',
    'https://q4.itc.cn/images01/20240806/079fd1d1622c41128ea7731d0cbdc9f9.jpeg',
    'https://rs.slu.edu.cn/_upload/article/images/05/c8/1596aefd4c7aa4a16a7cac0ca6a6/9575e0e2-6fd0-4dd9-a01e-4639483a63bf.jpg'
];

const items = colors.map((color, index) => (
    <Swiper.Item key={index}>
        <div
            style={{ background: color, height: '170px', color: '#ffffff', display: 'flex', justifyContent: 'center', alignItems: 'center', fontSize: '42px', userSelect: 'none' }}
        >
            <img src={color} alt='' style={{ width: '350px' }} />
        </div>
    </Swiper.Item>
));

const Multi = () => {
    const [visible, setVisible] = useState(false);
    return (
        <>
            <span onClick={() => {
                setVisible(true);
            }} style={{ float: 'right', marginTop: '10px' }}>
                查看图片
            </span>
            <ImageViewer.Multi images={demoImages} visible={visible} defaultIndex={1} onClose={() => {
                setVisible(false);
            }} />
        </>
    );
};

export default function School() {
    const navigate = useNavigate();
    const [activeTabKey, setActiveTabKey] = useState('1');
    const [showCardContent, setShowCardContent] = useState(true);

    const handleTabChange = (key) => {
        setActiveTabKey(key);
        if (key === '2') {
            setShowCardContent(false);
        } else {
            setShowCardContent(true);
        }
    };

    return (
        <div style={{ padding: '15px' }}>
            <div style={{ display: 'flex', alignItems: 'center' }}>
                <LeftOutlined onClick={() => { navigate(-1) }} />
                <div style={{ width: '100%', textAlign: 'center' }}>
                    <h3>学校介绍</h3>
                </div>
            </div>
            <div>
                <Tabs
                    defaultActiveKey={activeTabKey}
                    centered
                    items={tabItems}

                    onChange={handleTabChange}
                />
            </div>
            {showCardContent && (
                <Card>
                    <div>
                        <Swiper autoplay>{items}</Swiper>
                        <Multi />
                    </div>
                    <div style={{ marginTop: '30px' }}>
                        <h4>第一中学</h4>
                        <p>
                            踏入这所学校，葱郁的树木与鲜艳的花卉相互映衬，宜人的校园环境令人心旷神怡。
                            宽敞明亮的教学楼错落有致，现代化的建筑风格彰显着时代气息。
                            学校拥有雄厚的师资力量，老师们教学经验丰富且各具专长，他们不仅传授知识，
                            更注重引导学生探索未知、培养创新思维。在教学设施上，多媒体教室配备先进设备，
                            让课堂生动有趣；藏书丰富的图书馆，是知识的宝库，为同学们提供了广阔的阅读空间；
                            各类实验室一应俱全，为科学探索搭建了坚实的平台。
                            丰富多样的校园文化活动也是学校的一大亮点。社团活动精彩纷呈，
                            无论是热爱艺术的同学在绘画、音乐社团中展现才华，还是钟情体育的健儿在篮球、
                            田径赛场上挥洒汗水，都能在这里找到属于自己的舞台。定期举办的文化节、科技节等活动
                            ，更是激发了同学们的创造力与团队协作精神。在这里，同学们不仅能收获知识，
                            更能培养综合素质，在充满活力与关爱的氛围中茁壮成长，向着梦想稳步迈进 。
                        </p>
                    </div>
                </Card>
            )}
        </div>
    );
}